<template>
  <BaseCard class="h-full" :showHeadBorder="false">
    <template #header>
      <div class="flex">
        <span class="title">业务统计</span>
      </div>
    </template>
    <div class="h-[270px]">
      <el-row :gutter="5">
        <el-col :span="6">
          <chart :option="option2" height="270px" />
        </el-col>
        <el-col :span="12">
          <chart :option="option" height="270px" />
        </el-col>

        <el-col :span="6">
          <chart :option="option3" height="270px" />
        </el-col>
      </el-row>
    </div>
  </BaseCard>
</template>

<script setup>
import BaseCard from "./BaseCard.vue";
import chart from "@/components/chart/index";
import * as echarts from "echarts";
import * as homeApi from "@/api/home/index";
const feeList = ref([]);
const ProjectNumList = ref([]);
const ProjectNum = ref(0);
const AchievementNumList = ref([]);

const option = ref({
  title: {
    text: "本年度学院科研经费TOP5",
    subtext: "(按立项经费)",
    left: "center",
    // top:20,
    textStyle: {
      fontSize: 14,
      fontWeight: "normal",
      color: "#6E7079",
    },
    subtextStyle: {
      fontSize: 14,
      color: "#333",
    },
  },
  legend: {
    orient: "vertical",
    left: "right",
    align: "left",
    top: 12,
    itemWidth: 30,
    itemHeight: 10,
    data: ["立项经费", "到账经费"],
    textStyle: {
      color: "#6E7079",
    },
  },
  grid: {
    show: true,
    left: 60,
    top: 60,
    bottom: 20,
    right: 0,
  },
  tooltip: {
    show: true,
  },
  xAxis: {
    splitLine: {
      show: true, //分割线
    },
    axisLine: {
      show: false, //坐标轴
    },
    axisTick: {
      show: false, //坐标刻度
    },
    data: ["中医院", "附属医院", "基础医学部"],
  },
  yAxis: {
    name: "(万元)",
    splitLine: {
      show: true,
    },
  },
  series: [
    {
      name: "立项经费",
      type: "bar",
      barWidth: 12,
      itemStyle: {
        borderRadius: 5,
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
          [
            { offset: 0, color: "#21AAFF" }, // 0% 处的颜色
            { offset: 1, color: "#4ADEFF" }, // 100% 处的颜色
          ]
        ),
      },
      data: [10, 10, 20],
    },
    {
      name: "到账经费",
      type: "bar",
      barWidth: 12,
      barGap: "100%",
      itemStyle: {
        borderRadius: 5,
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
          [
            { offset: 0, color: "#E26F72" }, // 0% 处的颜色
            { offset: 1, color: "#FE898B" }, // 100% 处的颜色
          ]
        ),
      },
      data: [5, 20, 36],
    },
  ],
});
const option2 = ref({
  title: {
    text: "各类项目立项数量",
    left: "center",
    // top:20,
    textStyle: {
      fontSize: 14,
      color: "#333",
      fontWeight: "normal",
    },
  },
  legend: {
    orient: "vertical",
    left: "right",
    align: "left",
    top: 20,
    itemWidth: 30,
    itemHeight: 10,
    data: ["项目类型"],
    textStyle: {
      color: "#6E7079",
    },
  },
  grid: {
    show: false,
    left: 30,
    top: 60,
    bottom: 20,
    right: 0,
  },
  tooltip: {
    show: true,
  },
  xAxis: {
    splitLine: {
      show: false, //分割线
    },
    axisLine: {
      show: false, //坐标轴
    },
    axisTick: {
      show: false, //坐标刻度
    },
    data: ["纵向项目", "横向项目", "校级项目"],
  },
  yAxis: {
    name: "(项)",
    splitLine: {
      show: true,
    },
  },
  series: [
    {
      name: "项目类型",
      type: "bar",
      barGap: "100%",
      barMaxWidth: 50,
      itemStyle: {
        color: "#6395F9",
      },
      data: [5, 20, 36],
    },
  ],
});
const option3 = ref({
  title: {
    text: "本年度成果统计",
    left: '16%',
    textStyle: {
      fontSize: 14,
      color: "#333",
      fontWeight: "normal",
    },
  },
  legend: {
    type:"scroll",
    pageIconSize:10,
    pageIconColor :"#666",
    top: 30,
    orient: "vertical",
    left: "right",

    // bottom: 0,
    icon: "circle",
    textStyle: {
      color: "#6E7079",
    },
    // formatter: (name) => {
    //     // 用来格式化图例文本
    //     const value = AchievementNumList.value.find((item) => item.name === name).value;
    //      return `${name}：${value} 个`;
    //    // console.log("eee",name)
    //   },
  },
  grid: {
    show: false,
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  },
  tooltip: {
    show: true,
  },
  graphic: {
    elements: [
      {
        type: "text",
        left: "34%",
        top: "110",
        style: {
          text: "总",
          textAlign: "center",
          fill: "#333",
          fontSize: 14,
        },
      },
      {
        type: "text",
        left: "29%",
        top: "140",
        style: {
          text: "项",
          textAlign: "center",
          fill: "#333",
          fontSize: 20,
        },
      },
    ],
  },
  series: [
    {
      name: "成果类型",
      type: "pie",
      tooltip: {
        show: true,
        formatter: "{b}：{c}<br />占比：{d}%",
      },
      radius: ["40%", "68%"],
      center: ["35%", "55%"],
      // color: ["#FFA84A", "#32D9AC"],
      avoidLabelOverlap: false,
      label: {
        show: false,
        formatter: "{d}%",
      },
      labelLine: {
        show: false,
      },
      emphasis: {
        label: {
          show: false,
          fontSize: 20,
        },
      },
      data: [
        { value: 1048, name: "论文" },
        { value: 500, name: "专利" },
      ],
    },
  ],
});

onMounted(async () => {
  //经费
  let res = await homeApi.businessCountFee();
  if (res) {
    feeList.value = res.data;
    option.value.xAxis.data = feeList.value.map((item) => item.unitName);
    option.value.series[0].data = feeList.value.map((item) => item.feeAuthorize);
    option.value.series[1].data = feeList.value.map((item) => item.incomeFee);
  }
  //项目数据
  let CountProjectNumRes = await homeApi.getCountProjectNum();
  ProjectNumList.value = CountProjectNumRes.data;
  console.log("ProjectNumList=", ProjectNumList.value);
  option2.value.xAxis.data = ProjectNumList.value.map((item) => item.projectType);
  option2.value.series[0].data = ProjectNumList.value.map((item) => item.count);

  //成果数量
  let CountAchievementNumListRes = await homeApi.businessCountAchievementNum();
  AchievementNumList.value = CountAchievementNumListRes.data;
  console.log("AchievementNumList=", AchievementNumList.value);
  let total = 0;
  AchievementNumList.value.forEach((item) => {
    total += item.value;
  });
  option3.value.graphic.elements[1].style.text = total + "项";
  option3.value.series[0].data = AchievementNumList.value;
});
</script>

<style scoped lang="scss">
@import url("../index.scss");
.mr {
  margin-right: 10px;
}
</style>
